<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-01 10:07:47
 * @LastEditTime : 2023-08-21 10:18:08
-->
<script lang="ts" setup name="PostEditModal">
import { postApi } from '@/MainApp/apis/post'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formKey: {
    type: Object,
    default: () => {}
  },
  editData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (e: 'update:visible', bool: boolean): void
  (e: 'dataChange'): void
}>()
const { dialog, t } = useConfig()
const { lenName } = useLength()
const { msgError } = useMessage()
// 新增、修改
const placeholder = {
  name: '请输入岗位名称',
  remark: '请输入岗位描述'
}

const postState = reactive({
  title: '新增岗位',
  loading: false,
  form: { ...props.formKey }
})
const postRules = {
  name: [{ required: true, message: placeholder.name, trigger: 'blur' }],
  remark: [{ required: true, message: placeholder.remark, trigger: 'blur' }]
}
const dVisible = ref(false)
const postRef = ref()

const handleClose = () => {
  emits('update:visible', false)
  postState.loading = false
  postRef.value?.resetFields()
  postState.form = { ...props.formKey }
}
const handConfirm = () => {
  postRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      postState.loading = true
      const { msg, success } = props.editData
        ? await postApi.updatePost(postState.form)
        : await postApi.addPost(postState.form)
      if (success) {
        handleClose()
        emits('dataChange')
      }
      else {
        msgError(msg)
      }

      postState.loading = false
    }
  })
}

watch(
  () => props.visible,
  (bool: boolean) => {
    if (bool && props.editData)
      postState.form = { ...props.editData }

    postState.title = props.editData ? '修改岗位' : '新增岗位'
    dVisible.value = bool
  }
)
</script>

<template>
  <el-dialog
    v-model="dVisible"
    :title="postState.title"
    draggable
    :width="dialog.sl"
    :close-on-click-modal="false"
    @closed="handleClose"
  >
    <el-form
      ref="postRef"
      :model="postState.form"
      :rules="postRules"
      label-width="90px"
      label-position="top"
    >
      <el-form-item label="岗位名称" prop="name" min-width="180px">
        <el-input
          v-model.trim="postState.form.name"
          :maxlength="lenName"
          show-word-limit
          :placeholder="placeholder.name"
        />
      </el-form-item>
      <el-form-item label="岗位描述" prop="remark" min-width="280px">
        <el-input
          v-model.trim="postState.form.remark"
          :maxlength="lenName"
          show-word-limit
          type="textarea"
          :autosize="{ minRows: 4 }"
          :placeholder="placeholder.remark"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        bg
        text
        @click="handleClose"
      >
        {{ t("action.cancel") }}
      </el-button>
      <el-button
        type="primary"
        bg
        :loading="postState.loading"
        @click="handConfirm"
      >
        {{ t("action.sure") }}
      </el-button>
    </template>
  </el-dialog>
</template>
